<template>
  <view class="details" v-if="goods_details && goods_pic">
    <view class="box">
      <u-swiper
        @click="image"
        bg-color="#fff"
        :list="goods_pic"
        name="pics_big"
        :circular="true"
        height="750"
        img-mode="heightFix"
      ></u-swiper>
      <view class="text">
        <view class="price"
          >￥ {{ goods_details.goods_price }}
          <view class="ico">
            <u-icon name="zhuanfa" color="#707070"></u-icon>
            <u-icon name="star" color="#707070"></u-icon>
          </view>
        </view>
        <view class="name u-line-2">{{ goods_details.goods_name }}</view>
      </view>
    </view>
    <view class="pic">
      <rich-text :nodes="goods_details.goods_introduce"></rich-text>
    </view>
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator
          url="/pages/cart/cart"
          open-type="switchTab"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1 ">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_pic: [],
      goods_details: {},
    };
  },
  async onLoad(options) {
    let id = options.id;
    console.log(options);
    let [err, res] = await uni.request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
      data: {
        goods_id: id,
      },
    });

    this.goods_pic = res.data.message.pics;
    this.goods_details = res.data.message;
  },
  computed: {
    count() {
      return this.$store.getters.allcount;
    },
  },
  methods: {
    image(index) {
      const urls = this.goods_pic.map((v) => v.pics_big);
      const current = urls[index];
      uni.previewImage({
        current, // 当前显示图片的http链接
        urls, // 需要预览的图片http链接列表
      });
    },
    addCart() {
      let list = this.$store.state.cart_list;
      list.some(
        (v, i) => v.goods_id === this.goods_details.goods_id && list[i].count++
      ) || list.push({ ...this.goods_details, count: 1, check: true });
      this.$store.commit("add", list);
    },
  },
};
</script>

<style lang="scss" scoped>
.details {
  padding-bottom: 103rpx;
  background-color: #f9f9f9;
  .pic {
    margin-top: 20rpx;
  }
  .box {
    background-color: #fff;
    .text {
      display: flex;
      height: 220rpx;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 33rpx;
      font-size: 30rpx;
      .price {
        color: $themeColor;
        display: flex;
        justify-content: space-between;
        font-size: 36rpx;
        .ico {
        }
      }
    }
  }
  .navigation {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
}
</style>
